﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/SiteLayout.cshtml";
}
<style>
    #TaskTableContainer {
        width: 100%;
    }
</style>
<script type="text/javascript" src="@Url.Content("/Scripts/knockout-2.2.1.js")"></script>
<div id="TaskTableContainer">
</div>
<div>
    @Html.Partial("TaskManagerLayout")
</div>
<script type="text/javascript">
    $(document).ready(function () {

        var id;
        var idTask;
        var createdDate;
        function getViewModel() {
            //Make the self as 'this' reference
            var self = this;
            //Declare observable which will be bind with UI 
            $.ajax({
                type: "POST",
                url: "/Task/GetViewModel",
                contentType: "application/json",
                dataType: "json",
                async: false,
                success: function (data) {
                    self.iterationList = data.Iterations;
                    self.assignedList = data.Users;
                    self.stateList = data.States;
                    self.blockList = data.Blocks;
                    self.areaList = data.Areas;
                    self.activityList = data.Activities;

                    self.assignedSelected = ko.observable(data.Users[0].UserId);
                    self.iterationSelected = ko.observable(data.Iterations[0].Id);
                    self.stateSelected = ko.observable(data.States[0].Id);
                    self.blockSelected = ko.observable(data.Blocks[0].Id);
                    self.areaSelected = ko.observable(data.Areas[0].Id);

                    self.title = ko.observable();
                    self.remainingWork = ko.observable();
                    self.priority = ko.observable();
                    self.description = ko.observable();
                }
            });

            self.save = function () {

                var task = {
                    Id: id,
                    TaskId: idTask,
                    CreatedDate:  createdDate,
                    Title: self.title(),
                    EstimatedOrEffort: self.remainingWork(),
                    Priority: self.priority(),
                    Iteration: self.iterationSelected(),
                    AssignedTo: self.assignedSelected(),
                    Status: self.stateSelected(),
                    Block: self.blockSelected(),
                    Description: $('#txtaDescription').val() == '' ? null : $('#txtaDescription').val(),
                    Area: self.areaSelected(),
                };
                
                // TO DO: Code here to save data to db.
                $.ajax({
                    type: "POST",
                    url: "/Task/UpdateTask",
                    data: ko.toJSON(task),
                    contentType: "application/json",
                    success: function (data) {
                        $('#TaskTableContainer').jtable('load');
                    },
                    error: function () {
                        alert("Fail");
                    }
                });
            };

            return self;
        }

        var viewModel = getViewModel();
        ko.applyBindings(viewModel);

        $('#TaskTableContainer').jtable({
            title: 'Task List',
            paging: true,
            pageSize: 10,
            sorting: true,
            defaultSorting: 'TaskId ASC',
            size: 399,
            selecting: true, //Enable selecting
            multiselect: false, //Allow multiple selecting
            selectingCheckboxes: false,
            actions: {
                listAction: '/Home/GetTaskList',
            },
            fields: {
                TaskId: {
                    title: 'Id',
                    key: true,
                    create: false,
                    edit: false,
                    width: '23%',

                },
                Title: {
                    title: 'Title',
                    width: '23%'
                },
                StatusName: {
                    title: 'State',
                },
                UserName: {
                    title: 'Assigned To',
                },
                CreatedDate: {
                    title: 'CreateTaskd Date',
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                }
            },
            recordsLoaded: function (event, data) {
                $('.jtable-data-row').click(function () {
                    var record = $(this).data('record');
                    id = record.Id;
                    idTask = record.TaskId;
                    createdDate = record.CreatedDate;
                    viewModel.assignedSelected(record.AssignedTo);
                    viewModel.iterationSelected(record.Iteration);
                    viewModel.stateSelected(record.Status);
                    viewModel.blockSelected(record.Block);
                    viewModel.areaSelected(record.Area);

                    viewModel.title(record.Title);
                    viewModel.remainingWork(record.EstimatedOrEffort);
                    viewModel.priority(record.Priority);

                    // The TinyMCE control cannot bind, you should set value to control
                    if (record.Description == null) {
                        $('#txtaDescription').val('');
                    }
                    else {
                        $('#txtaDescription').val(record.Description);
                    }
                });
            }
        });

        $('#TaskTableContainer').jtable('load');

    });
</script>
